<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i> 拍卖行</el-breadcrumb-item>
                <el-breadcrumb-item>拍卖行审核</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="handle-box">
            <!-- <el-button type="primary" icon="delete" class="handle-del mr10" @click="delAll">批量删除</el-button> -->
            <el-select v-model="select_cate" placeholder="拍卖行状态" class="handle-select mr10" @change="handleSelectionChange">
                <el-option key="" label="所有" value="-1"></el-option>
                <el-option key="1" label="待审核" value="1"></el-option>
                <el-option key="2" label="已审核" value="2"></el-option>
                <el-option key="3" label="未通过" value="3"></el-option>
            </el-select>
            <!-- <el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input>
            <el-button type="primary" icon="search" @click="search">搜索</el-button> -->
        </div>
        <el-table :data="data" border style="width: 100%" ref="multipleTable" > <!-- @selection-change="handleSelectionChange" -->
            <!-- <el-table-column type="selection" width="55"></el-table-column> -->
            <el-table-column fixed prop="name" label="名称" sortable width="250">
            </el-table-column>
            <el-table-column prop="email" label="邮箱" sortable width="250">
            </el-table-column>
            <el-table-column prop="website" label="网址" width="220">
            </el-table-column>
            <el-table-column label="营业执照" width="120">
              <template scope="scope">
                <a :href="scope.row.blicenseUrl" target="_blank">{{scope.row.blicenseName}}</a>
              </template>
            </el-table-column>
            <el-table-column label="拍卖行资质" width="120">
              <template scope="scope">
                <a :href="scope.row.qualiDocUrl" target="_blank">{{scope.row.qualiDocName}}</a>
              </template>
            </el-table-column>
            <el-table-column label="身份证明" width="120">
              <template scope="scope">
                <a :href="scope.row.idUrl" target="_blank">{{scope.row.idName}}</a>
              </template>
            </el-table-column>
            <el-table-column prop="right" label="权限" :formatter="rightFormatter" width="120">
            </el-table-column>
            <el-table-column prop="state" label="状态" :formatter="stateFormatter" width="120">
            </el-table-column>
            <el-table-column prop="createAt" label="注册时间" :formatter="createAtFormatter" width="120">
            </el-table-column>
            <el-table-column label="操作" width="160">
                <template scope="scope">
                    <el-button size="small"
                            @click="handleDetail(scope.$index, scope.row)">详细</el-button>
                    <!-- <el-button size="small" type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                    @current-change ="handleCurrentChange"
                    layout="prev, pager, next"
                    :total="Math.ceil(total/20,0)">
            </el-pagination>
        </div>
        <vodal :show="show" v-if="show" animation="zoom" @hide="show = false" :width="1000" :height="600">
            <house-profile :houseId="select_houseId" :auditDone="auditHouse"></house-profile>
        </vodal>
    </div>
</template>

<script>
import HouseProfileCard from "../cards/HouseProfileCard";

export default {
  components: {
    "house-profile": HouseProfileCard
  },
  data() {
    return {
      tableData: [],
      cur_page: 1,
      total: 0,
      select_cate: "",
      select_word: "",
      select_houseId: 0,
      is_search: false,
      show: false
    };
  },
  created() {
    this.getData();
  },
  computed: {
    data() {
      const self = this;
      return self.tableData;
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getData();
    },
    getData() {
      let self = this;
      self.$http
        .get(
          "api/mgr/houses?state=" +
            self.select_cate +
            "&offset=" +
            (self.cur_page - 1) * 20 +
            "&count=20"
        )
        .then(res => {
          if (res.data.code != 1) {
            return;
          }
          self.tableData = res.data.content.items;
          self.total = res.data.content.total;
        });
    },
    search() {
      this.is_search = true;
    },
    createAtFormatter(row, column) {
      var d = new Date(
        row.createAt / 10000 +
          new Date(1970, 1, 1).getTime() +
          new Date(1601, 1, 1).getTime()
      );
      return d.toDateString();
    },
    rightFormatter(row, column) {
      switch (row.right) {
        case 2049:
          return "注册";
        case 2050:
          return "邮箱验证";
        case 2052:
          return "正式";
        default:
          break;
      }
      return "未知";
    },
    stateFormatter(row, column) {
      switch (row.state) {
        case 0:
          return "未提交审核";
        case 1:
          return "等待审核";
        case 2:
          return "审核通过";
        case 3:
          return "审核被拒";
        default:
          break;
      }
      return "未知";
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    handleDetail(index, row) {
      this.select_houseId = this.tableData[index].id;
      this.show = true;
    },
    handleSelectionChange() {
      this.getData();
    },
    auditHouse(accepted) {
      for (var i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].id == this.select_houseId) {
          this.tableData[i].state = accepted ? 2 : 3;
          break;
        }
      }
    }
  }
};
</script>

<style >
.handle-box {
  margin-bottom: 20px;
}
.handle-select {
  width: 120px;
}
.handle-input {
  width: 300px;
  display: inline-block;
}
</style>